<template>
	<div class="active">
		<div class="fixed">
			<div class="title flex">
				<div class="title_left">
					<img @click="back" src="../assets/image/return.png" />
				</div>
				<div class="add">
					二维码海报
				</div>
				<div>
				</div>
			</div>

		</div>
		<div class="lists">
			<div class="ma flex">
				<img :src="code" />
			</div>
			<div class="button flex">
				<div>长按二维码保存至相册</div>
			</div>
		</div>
	</div>

	</div>

</template>

<script>
	export default {
		data() {
			return {
				code: ''
			}
		},
		//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
		created: function() {

		},
		methods: {
			back() {
				this.$router.go(-1)
			},

			skipto_register() {
				this.$router.push({
					path: '/register'
				});
			},
			skipto_code() {
				this.$router.push({
					path: '/code'
				});
			},
			downloadIamge(imgsrc, name) {//下载图片地址和图片名
			  var image = new Image();
			  // 解决跨域 Canvas 污染问题
			  image.setAttribute("crossOrigin", "anonymous");
			  image.onload = function() {
			    var canvas = document.createElement("canvas");
			    canvas.width = image.width;
			    canvas.height = image.height;
			    var context = canvas.getContext("2d");
			    context.drawImage(image, 0, 0, image.width, image.height);
			    var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
			  
			    var a = document.createElement("a"); // 生成一个a元素
			    var event = new MouseEvent("click"); // 创建一个单击事件
			    a.download = name || "photo"; // 设置图片名称
			    a.href = url; // 将生成的URL设置为a.href属性
			    a.dispatchEvent(event); // 触发a的单击事件
			  };
			  image.src = imgsrc;
			},
			downs(){
			  this.downloadIamge(this.code, 'pic')
			}
			// getUrlBase64(url) {
			// 	return new Promise(resolve => {
			// 		let canvas = document.createElement('canvas')
			// 		let ctx = canvas.getContext('2d')
			// 		let img = new Image()
			// 		img.crossOrigin = 'Anonymous' //允许跨域
			// 		img.src = url
			// 		img.onload = function() {
			// 			canvas.height = 300
			// 			canvas.width = 300
			// 			ctx.drawImage(img, 0, 0, 300, 300)
			// 			let dataURL = canvas.toDataURL('image/png')
			// 			canvas = null
			// 			resolve(dataURL)
			// 		}
			// 	})
			// },
			// download() {//同域名下载可以下载
			// 	this.getUrlBase64(this.code).then(base64 => {
			// 		let link = document.createElement('a')
			// 		link.href = base64
			// 		link.download = 'qrCode.png'
			// 		link.click()
			// 	})
			// }
		},
		mounted() {
			var _this = this;
			var datas = {
				market_id: _this.$route.query.market_id,
				url: _this.$route.query.url,
				store_id: _this.$route.query.store_id,
				key:localStorage.getItem("key")
			}
			var qs = require('qs');
			_this.$http.post(_this.baseURL + '/index.php/waveguest/market/market_ma', qs.stringify(datas)).then(response => {
				console.log(response)
				_this.code = response.data.data;
			}).catch(error => {

			});
		},
	}
</script>

<style>

</style>
<style scoped="scoped">
	.active {

		position: fixed;
		top: 0;
		width: 100%;
		max-width: 640px;
		height: 100%;
	}

	.title_left {
		width: 0.67391rem;
		height: 0.67391rem;
	}

	.lists {
		width: 13.2608rem;
		height: 21.5217rem;
		margin: 2rem auto;
		border-radius: 0.5rem;
		background: white;
		box-shadow: 0 0 1.5rem #D1D5D8;

	}

	.title_left>img {
		width: 0.67391rem;
		height: 0.67391rem;
	}

	.title {
		width: 90%;
		padding: 0 5% 0 5%;
		height: 2rem;
		font-size: 0.7193rem;
		background: white;
		align-items: center;
	}

	.title div {
		width: calc(100%/3);
		align-items: center;
	}

	.title>div:nth-child(2) {
		text-align: center;
	}

	.ma {
		width: 100%;
		height: 70%;
		justify-content: center;
		align-items: center;
	}

	.ma>img {
		width: 6.15217rem;
		height: 6.15217rem;
	}

	.button {
		width: 100%;
		height: 30%;
		justify-content: center;
		align-items: center;
		font-size: 0.60869rem;
	}

	.button>div {
		width: 7.04347rem;
		height: 1.4565rem;
		background: #007AFF;
		border-radius: 0.5rem;
		color: white;
		text-align: center;
		line-height: 1.4565rem;
	}
</style>
